<template>
    <el-form ref="ruleForm" class="demo-ruleForm">
        <el-form-item>
            <el-image v-if="codeUrl !=''" class="img" :src="'data:image/png;base64,'+codeUrl">
            </el-image>
            <el-image class="img" v-else>
                <div slot="error" class="box box-tb box-align-center box-pack-center height100">
                    <i class="el-icon-loading"></i>
                    <span>加载中...</span>
                </div>
            </el-image>
        </el-form-item>
        <el-form-item>
            <el-col class="tc" style="color: rgb(173, 173, 173);">登录即代表同意《用户协议》 《隐私政策》</el-col>
        </el-form-item>
    </el-form>
</template>

<script>
    import {
        v4 as uuidv4
    } from 'uuid';
    export default {
        data() {
            return {
                codeUrl: '',
                websock: null,
                token: '',
                loginSocketUrl: 'wss://www.wytldy.com:8765/WebSocketServer/'
            }
        },
        methods: {

            getCode() {
                let token = this.$md5(uuidv4() + new Date().toLocaleString());
                this.$ajax.get('/wx/login/getQRCode', {
                    scene: encodeURIComponent(token)
                }).then(res => {
                    if (res.code == 0) {
                        this.codeUrl = res.url;
                        this.token = token;
                        this.initSocket();
                    }

                })
            },
            initSocket() {
                console.log(this.loginSocketUrl + this.token);
                this.websock = new WebSocket(this.loginSocketUrl + this.token);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen() {
                console.log("connection success!");
            },
            websocketclose(e) {
                console.log("connection close!");

            },
            websocketonerror() { //连接建立失败重连
                this.initSocket();
            },
            websocketonmessage(e) {
                // var m=e.data.replace(/\\/g,"");
                // m=m.substring(1,m.length-1);

                const data = e.data != '连接成功' ? JSON.parse(e.data) : '连接成功';
                console.log(data.cmd == undefined);
                console.log(data.cmd);
                console.log(data);
                if (data.cmd != undefined) {
                    switch (data.cmd) {
                        case "login":
                            this.codeLogin(data.openid);
                            this.websock.close(); //关闭login socket
                            break;
                        default:
                            break;
                    }
                }
                // const data = JSON.parse(e.data);
                // switch (data.cmd) {
                //     case "dcslogin":
                //         console.log(data.userCode);
                //         console.log(data.token);
                //         this.codeLogin(data.userCode, data.token);
                //         this.websock.close(); //关闭login socket
                //         break;
                //     default:
                //         break;
                // }
            },
            websocketsend(Data) { //数据发送
                this.websock.send(Data);
            },
            codeLogin(openid) {
                let params = {
                    loginByOpenID: openid,
                };
                this.$ajax.post('/loginByOpenID', params).then(res => {
                    console.log(res);
                    if (res.result == "success") {
                        this.$router.push({
                            path: '/role',
                            query: {
                                usercode: res.user.userCode
                            }
                        });
                    } else if (res.result == "none") {
                        this.$message.error('无此用户');
                    } else if (res.result == "fwdq") {
                        this.$message.error('服务已到期');
                    } else {
                        this.$message.error('无登录权限');
                    }
                })
            }
        },
        destroyed() {
            this.websocketclose();
        }
    }
</script>

<style scoped>
    .demo-ruleForm {
        padding-top: 50px;
    }

    .img {
        width: 220px;
        height: 220px;
    }

    /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-icon-loading {
        font-size: 25px;
    }
</style>
